<template>
  <div>
    <!--    卡片视图区域-->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入内容">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary">
            搜索
          </el-button>
        </el-col>
      </el-row>
      <el-table
        :data="userList" border stripe>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="userId" label="用户编号" width="100"></el-table-column>
        <el-table-column prop="username" label="用户名" width="100"></el-table-column>
        <el-table-column prop="userType" label="用户类型" width="100">
          <template v-slot:default="scope">
            <div v-if="scope.row.userType === 1">
              教师
            </div>
            <div v-if="scope.row.userType === 2">
              学生
            </div>
            <div v-if="scope.row.userType === 3">
              管理员
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="academy" label="学院" width="200"></el-table-column>
        <el-table-column prop="major" label="专业" width="200"></el-table-column>
        <el-table-column prop="" label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="primary" size="small">查看</el-button>
            <el-button type="danger" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      userList: []
    }
  },
  created () {
    this.getUserList()
  },
  methods: {
    async getUserList () {
      const { data: res } = await this.$http.post('/getUsers')
        .catch((error) => {
          console.log(error)
          this.$message.error('网络连接超时')
        })
      if (res.status !== 200) this.$message.error('获取用户列表失败')
      // console.log(res)
      this.userList = res.data
      // console.log(res.data)
    }
  }
}
</script>

<style scoped>

</style>
